
import React, { Component, PropTypes } from 'react';
import {
	Alert, Dimensions, Image,StyleSheet, Text, View, ScrollView, TouchableOpacity, Platform,
} from 'react-native';
import { MtContainer, MtChar, MtEdit, MtFixedButton, MtLabelBar, MtToast, MtPopupPicker,MtNavBar,
	MtSeparator, MtDateTimePicker, MtColor, MtActionButton, MtListView, MtEmptyView, MtCaptcha,MtInput, MtButton } from 'martian-ui';
import {fetchDeviceList} from '../action/girlAction';
const DeviceCell = require('../components/DeviceCell');
import { bindActionCreators } from 'redux';
import dismissKeyboard from 'react-native/Libraries/Utilities/dismissKeyboard';
const { MtM3, MtL3, MtW1 , MtT0, MtT3, } = MtChar;
import TipBar from '../components/TipBar';
import values from 'lodash/values';
import keys from 'lodash/keys';
import {connect} from 'react-redux';
const EntityLabels = require('../constants/entities');
import assign from 'lodash/assign';
import ManageActionDevice from '../container/ManageActionDevice';
import ScenceName from '../container/ScenceName';
import {passwordAuthCode, forgetPassword} from '../action/user';
import {isMobile} from '../utils/validator';

import { modelToKeyString } from '../utils/modelToKeyString';
import NavigationBar from '../components/common/NavigationBar'
const LOGIN = {
	mobileHint: '请输入手机号',
	passwordHint: '请输入密码',
	newPasswordHint: '请输入新密码',
	captchaHint: '请输入验证码',
	login: '登录',
	forgetPassword: '忘记密码?',
	findPassword: '找回密码',
	passwordLogin: '使用密码登录',
	captchaLogin: '使用验证码登录',
	welcome: '欢迎回来',
};


class ForgetPassword extends Component {
	constructor(props) {
		super(props)
		// 初始状态
		this.state = {
			mobile: '',
			captcha:'',
			password:''
		}
	}
	render() {
		const {passwordAuthCode, forgetPassword, navigator} =this.props;
		const {mobile, captcha, password} = this.state;
		const CaptchaView = (
			<View>
				<View style={styles.textInputContainer}>
					<Image source = {require('../img/code_icon@3x.png')} style = {styles.phong_icon} />
					<View style={{ flex: 1 }}>
						<MtInput
							ref={(input) => {
								this.login3 = input;
							}}
							style={styles.inputStyle1}
							defaultValue={60}
							maxLength={6}
							keyboardType="numeric"
							returnKeyType="done"
							placeholder={LOGIN.captchaHint}
							underlineColorAndroid="transparent"
							onFocus={() => {
							}}
							onBlur={() => {
							}}
							onChangeText={(text) => {
								this.setState({ captcha: text });
							}}
							onSubmitEditing={() => {
								this.login3.blur();
							}}
						/>
						<MtSeparator />
					</View>
					<View style={styles.captchaContainer}>
						<MtCaptcha
							containerStyle={{
								flex: 1,
								marginLeft: 0,
								marginRight: 0,
								marginTop: 0,
								marginBottom: 0,
								borderWidth: 0,
								width: 56,
								height: 25,
								borderRadius: 6,
								backgroundColor: '#00919A'

							}}
							style={{ color: (!isMobile(mobile)) ? '#d3d3d3' : '#fff'}}
							text="获取"
							time={60}
							disabled={!isMobile(mobile) }
							onPress={
								() => {
									passwordAuthCode(mobile).then((res)=>{
										console.warn(JSON.stringify(res))
										MtToast.show('验证码已发送,请注意查收');
									})
								}
							}
						/>
					</View>
				</View>

			</View>
		);

		return (
			<MtContainer>
        <NavigationBar
          statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
          style={{backgroundColor: '#F4F4F4'}}
          navigator={this.props.navigator}
        />
				<ScrollView>
					<View style={{ marginLeft: 15}}>
						<View style={{ flexDirection:'row', paddingTop: 60, alignItems:'center'}}>
							<MtT0 style={{ fontSize: 36, color: '#333333'}}>忘记密码？</MtT0>
						</View>
						<MtL3 style={{ marginTop: 14, fontSize: 14, color: '#333333', opacity: 0.7}}>使用注册时手机号码找回密码</MtL3>
					</View>
					<View style={{ alignItems:'center'}}>
						<View style={{ width: 345, height: 340, marginTop: 30, backgroundColor: '#fff',}}>
							<View style={{ flexDirection: 'row', marginTop: 50, alignItems:'center'}}>
								<Image source = {require('../img/phong_icon@3x.png')} style = {styles.phong_icon} />
								<View style={{ flex: 1, backgroundColor: '#fff' }}>
									<MtInput
										ref={(input) => {
											this.searchInput = input;
										}}
										style={[styles.inputStyle]}
										defaultValue={undefined}
										underlineColorAndroid="transparent"
										placeholder="请输入手机号码"
										returnKeyType="default"
										onFocus={() => {
											this.setState({ focus: true });
										}}
										onBlur={() => this.setState({ focus: false })}
										onChangeText={(res) => {
											this.setState({ mobile: res });
										}}
										onSubmitEditing={(event) => {
											if (event.nativeEvent.text && event.nativeEvent.text.length > 1) {
												dismissKeyboard();

											}
										}}
									/>
									<MtSeparator style={{ marginRight: 30 }} />
								</View>
							</View>
							{CaptchaView}
							<View style={{ flexDirection: 'row', alignItems:'center'}}>
								<Image source = {require('../img/password_icon@3x.png')} style = {styles.phong_icon} />
								<View style={{ flex: 1, backgroundColor: '#fff' }}>
									<MtInput
										ref={(input) => {
											this.searchInput = input;
										}}
										style={[styles.inputStyle]}
										defaultValue={undefined}
										underlineColorAndroid="transparent"
										placeholder="请输入新密码"
										returnKeyType="default"
										onFocus={() => {
											this.setState({ focus: true });
										}}
										onBlur={() => this.setState({ focus: false })}
										onChangeText={(res) => {
											this.setState({ password: res });

										}}
										onSubmitEditing={(event) => {
											if (event.nativeEvent.text && event.nativeEvent.text.length > 1) {
												dismissKeyboard();

											}
										}}
									/>
									<MtSeparator />
								</View>
								<Image source = {require('../img/password_icon_hl@3x.png')} style = {styles.phong_icon} />
							</View>
							<View style={{ flex: 1, backgroundColor: '#fff', justifyContent:'center', alignItems: 'center', paddingBottom: 20 }}>
								<MtButton
									containerStyle={{
										borderRadius: 22,
										width: 200,
										height: 44,
										backgroundColor: '#35B8AC',
									}}

									onPress={() => {
										forgetPassword(captcha, password, mobile).then(()=>{
											MtToast.show('重制密码成功');
											navigator.pop();

										})
									}}
								>
									确认修改
								</MtButton>
							</View>
						</View>
						<View style={{ flex: 1,  justifyContent:'center', alignItems: 'center', marginTop: 20 }}>
							<Image source = {require('../img/logn_img@3x.png')} style = {styles.logn_img} />

						</View>
					</View>

				</ScrollView>

			</MtContainer>
		);}
};


function mappingStateToProps(state, ownProps) {

	const entities= state['entities'];
	const devicesEntities = entities[EntityLabels.devices];

	return {
	}
}
function mapDispatchToProps(dispatch) {
	const actions = {
		forgetPassword,
		passwordAuthCode
	};
	return bindActionCreators(actions, dispatch);
}

module.exports = connect(mappingStateToProps, mapDispatchToProps)(ForgetPassword);

const styles = StyleSheet.create({
	textContainer: {
		marginTop: 10,
	},
	headContainer: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		marginTop: 26,
	},
	inputStyle: {
		height: 50,
		fontSize: 16,
	},
	buttonStyle: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
	},
	textInputContainer: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	captchaContainer: {
		width: 56,
		height: 26,
		backgroundColor: '#00919A',
		borderRadius: 10,
		alignItems: 'center',
		justifyContent: 'center',
		marginRight: 20,
	},
	passwordHideContainer: {
		alignItems: 'center',
		justifyContent: 'center',
	},
	lineStyle: {
		width: 1,
		height: 18,
		backgroundColor: MtColor.separator,
	},
	logoIcon:{
		width: 50,
		height: 50,
	},
	phong_icon:{
		width: 38,
		height: 38,
		marginHorizontal: 22,

	},
	logn_img:{
		width: 134,
		height: 34,
	},
	inputStyle1: {
		height: 50,
		fontSize: 14,
		backgroundColor:'#fff'
	},
});
